<script setup>

import VideoCard from "@/views/index/components/VideoCard.vue";
import VideoApi from "@/apis/VideoApi.js";
import {onMounted, ref} from "vue";

const videos = ref([]);

onMounted(()=>{
  fetchUserVideos();
})

const fetchUserVideos = async () => {
  const res = await VideoApi.fetchUserVideo();
  console.log('用户视频',res);
  videos.value = res.data.videos;
}

</script>

<template>
  <div class="title_video">
    视频
  </div>
  <div class="video-grid" v-if="videos && videos.length > 0">
    <VideoCard v-for="(video, index) in videos?videos:null" :key="index" :video="video" />
  </div>
  <div v-else class="empty-message">
    这里什么都没有~
  </div>
</template>

<style scoped lang="less">
.title_video{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  height: 34px;
  font-size: 24px;
  font-weight: 600;
  color: black;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
  box-shadow: 0 1px 0 0 #e7e7e7;

  @media screen and (max-width: 1654px) {
    grid-template-columns: repeat(4, 1fr);
  }

  @media screen and (max-width: 1334px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.empty-message {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100px;
   font-size: 16px;
   color: #999;
   margin: 20px 0;
 }
</style>
